<template>
	<view class="home-wrap u-m-b-20">
		<base-nav-bar :isBack="true" :background="{'background':'#fff'}">
			<text
				slot="content"
				style="color: #333; width: 100%; text-align: center;padding-left: 20rpx;"
			>
				课程列表
			</text>
		</base-nav-bar>
		<!-- 商家简介 -->
		<view class="course-add u-flex u-flex-column u-flex-items-center u-p-t-20 u-p-b-20 u-m-l-30 u-m-r-30" :style="{'top':customBar+ 'px' }">
			<view class="u-flex course-add-btn u-flex-center u-flex-items-center" @click="jump('/pages-merchant/merchant/courseEdit')">
				<image class="course-add-icon" src="/static/images/merchant/course/course_add.png" ></image>
				<text class="course-add-txt u-m-l-20">新增课程</text>
			</view>
		</view>
		<view class="content-box"  v-if="!isEmpty" style="margin-top: 120rpx;">
			<view class="u-flex u-flex-column u-flex-between merchant-box u-p-t-20 u-m-l-30 u-m-r-30 u-m-b-20" v-for="(item,index) in courseList" :key="index"
			@click="jump('/pages-merchant/merchant/courseDetail?courses_id='+item.id)">
				<view class="course-item u-flex u-flex-between u-flex-items-center u-p-l-20 u-p-b-20 u-p-r-20">
					<view class="u-flex u-flex-start u-flex-items-center u-flex-3">
						<image :src="item.image" class="merchant-logo"></image>
						<view class="u-flex u-flex-items-start u-flex-column u-flex-between u-m-l-20" style="height: 140rpx;width: 70%;">
							<view class="u-flex u-flex-between u-flex-items-start goods-titles">
								<view class="goods-item-text u-ellipsis-2">{{ item.name }}</view>
								<view class="goods-item-btn" @click.stop="changesCourse(item)" :class="item.is_show=='1'?'delete':'edit'">{{ item.is_show=='1'?'下架':'上架' }}</view>
							</view>
							<view class="course-item-number u-flex u-flex-items-end" v-if="item.price">
								<text>¥</text>
								<text>{{ dealNumber(item.price)[0] }}.</text>
								<text style="font-size: 30rpx;margin-bottom: 2rpx;">{{ dealNumber(item.price)[1] }}</text>
							</view>
						</view>
					</view>
					<view class="course-item-btn-group u-flex u-flex-1 u-flex-column u-flex-around u-flex-items-end">
						<view class="course-item-btn edit" @click.stop="jump('/pages-merchant/merchant/courseEdit?id='+item.id)">编辑</view>
						<view class="course-item-btn delete" @click.stop="deleteCourse(item.id)">删除</view>
					</view>
				</view>
				<view class="course-item-bottom u-flex u-flex-center u-flex-items-center">
					<view class="u-flex u-flex-items-center u-flex-start"  @click="jump('/pages-merchant/merchant/courseBookingRecord?course_id='+item.id)">
						<text class="course-item-look-text">查看预约记录</text>
						<u-icon name="arrow-right" :color="'#30AA4D'" :size="14" class="merchant-icon"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<!-- 数据为空 -->
		<u-empty
			v-if="isEmpty"
			mode="data"
			:marginTop="220"
			text="暂无课程记录"
		>
		</u-empty>
		<!-- 更多 -->
		<u-loadmore v-if="!isEmpty" height="80rpx" :status="loadStatus" icon-type="flower" color="#ccc"/>
	</view>
</template>

<script>
let systemInfo = uni.getSystemInfoSync();
let menuButtonInfo = {};
// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
menuButtonInfo = uni.getMenuButtonBoundingClientRect();
// #endif
import { mapGetters } from 'vuex';
import { HTTP_IMG_URL } from '../../config/app.js'
import BaseNavBar from "../../components/BaseNavBar.vue";
export default {
	components: {
		BaseNavBar
	},
	data() {
		return {
			courseList:[
			],
			loadStatus   : 'nomore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
			currentPage  : 1,
			lastPage     : 1,
			total  : '',
			isEmpty      : false,
		};
	},
	computed: {
		...mapGetters(['isLogin', 'userInfo']),
		customBar() {
			let statusBarHeight = systemInfo.statusBarHeight;
			console.log("====statusBarHeight",statusBarHeight)
			// #ifndef MP
			return systemInfo.platform == 'android' ? statusBarHeight + 50 : statusBarHeight + 45;
			// #endif
			// #ifdef MP-WEIXIN
			return menuButtonInfo.bottom + menuButtonInfo.top - statusBarHeight;
			// #endif
			// #ifdef MP-ALIPAY
			return statusBarHeight + systemInfo.titleBarHeight;
			// #endif
		}
	},
	onPullDownRefresh() {
	
	},
	
	onShow() {
		this.courseList = [];
		this.currentPage = 1;
		this.getMourserList();
	},
	onHide() {
	},
	onLoad() {
	
	},
	created() {
		// 触底监听
		uni.$on('uOnReachBottom', data => {
			if (this.loadStatus == 'loadmore') {
				this.currentPage += 1;
				this.getMourserList();
			}
		});
	},
	methods: {
		HTTP_IMG_URL() {
			return HTTP_IMG_URL
		},
		// 路由跳转
		jump(path, parmas) {
			uni.navigateTo({
				url: path,
				query: parmas
			});
		},
		// 消费列表
		getMourserList() {
			let that = this;
			that.$Api.merchant.courseList({
				page    : that.currentPage,
				pageSize: 20
			}).then(res => {
				that.courseList = [...that.courseList, ...res.data.data];
				that.isEmpty     = !that.courseList.length;
				that.loadStatus  = that.currentPage < res.data.last_page ? 'loadmore' : 'nomore';
			});
		},
		dealNumber(number){
			let arr = number.split('.');
			return arr
		},
		deleteCourse(id){
			this.$Api.merchant.courseDelete({
				id: id
			}).then(res => {
				uni.showToast({
					title: '删除成功',
					icon: 'none'
				})
				this.courseList.splice(this.courseList.findIndex(item => item.id == id), 1);
			})
		},
		changesCourse(item){
			let that = this;
			let id = item.id;
			that.$Api.merchant.courseShow({
				course_id    : id,
				is_show: item.is_show=='1'?'2':'1'
			}).then(res => {
				uni.$u.toast('操作成功')
				this.courseList = [];
				this.currentPage = 1;
				this.getMourserList()
			});
		}
	}
};
</script>

<style lang="scss" scoped>
/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
.home-wrap {
	min-height: 100vh;
	background: #F6F6F8;
}
.kehu-item {
	border-radius: 20rpx;
	width: 100%;
	.swipers{
		width: 100%;
	}
}
.nickname{
	font-size: 34rpx;
	font-weight: bold;
}
.course-add{
	position: fixed;
	background: #F6F6F8;
	z-index: 1000;
	width: calc(100% - 60rpx);
	.course-add-btn{
		background: linear-gradient( 270deg, #20CE83 0%, #9FF79A 100%);
		border-radius: 8px;
		width: 100%;
		height: 80rpx;
		.course-add-icon{
			width: 40rpx;
			height: 40rpx;
		}
		.course-add-txt{
			color: #fff;
			font-size: 30rpx;
		}
	}
}
.goods-titles{
		 width: 100%;
		 .goods-item-btn{
			 width: 66px;
			 height: 34px;
			 border-radius: 100px;
			 display: flex;
			 align-items: center;
			 justify-content: center;
			 font-weight: 500;
			 font-size: 28rpx;
			 color: #FFFFFF;
		 }
		 .edit{
			 background: linear-gradient( 270deg, #30AA4D 0%, #20CE83 100%);
			 box-shadow: 0px 2px 4px 0px rgba(48,170,77,0.3);
		 }
		 .delete{
			 background: linear-gradient( 270deg, #FE4369 0%, #FE746D 100%);
			 box-shadow: 0px 2px 4px 0px rgba(254,70,105,0.3);
		 }
		 .goods-item-text{
			 font-weight: 400;
			 font-size: 32rpx;
			 color: #000000;
		     width:62%
		 }
	 }
.content-box{
	.merchant-box{
		background:linear-gradient( 180deg, #FFFFFF 0%,#FFFFFF 30%, #FFFFFF 100%);
		box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.1), inset 0px 1px 0px 0px #FFFFFF;
		border-radius: 30rpx;
		min-height: 15vh;
		position: relative;
		.course-item{
			width: 100%;
			margin: 0rpx 0rpx 20rpx;
			.merchant-logo{
				width: 140rpx;
				height: 140rpx;
				border-radius: 20rpx;
			}
			.merchant-icon{
				width: 30rpx;
				height: 30rpx;
			}
			.course-item-text{
				font-weight: 400;
				font-size: 32rpx;
				color: #000000;
			}
			.course-item-number{
				font-weight: bold;
				font-size: 40rpx;
				color: #FD463E;
				margin-left: 10rpx;
			}
			.course-item-btn-group{
				.course-item-btn{
					width: 66px;
					height: 34px;
					border-radius: 100px;
					display: flex;
					align-items: center;
					justify-content: center;
					font-weight: 500;
					font-size: 28rpx;
					color: #FFFFFF;
				}
				.edit{
					background: linear-gradient( 270deg, #30AA4D 0%, #20CE83 100%);
					box-shadow: 0px 2px 4px 0px rgba(48,170,77,0.3);
				}
				.delete{
					margin-top: 20rpx;
					background: linear-gradient( 270deg, #FE4369 0%, #FE746D 100%);
					box-shadow: 0px 2px 4px 0px rgba(254,70,105,0.3);
				}
			}
		}
		.course-item-bottom{
			width: 100%;
			background: #EDF7EF;
			border-radius: 0px 0px 14px 14px;
			height: 70rpx;
			.course-item-look-text{
				width: 100%;
				text-align: center;
				font-weight: 400;
				font-size: 26rpx;
				color: #30AA4D;
			}
		}
		
	}
}
</style>
